import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, getUserInfo } from '@/api/user'
import { constantRoutes } from '@/router'
import { resetRouter } from '@/router'

const state = {
  // 变量的初始值是从缓存中读取出来的
  token: getToken(),
  userInfo: {},
  // 路由（静态 + 用户能访问的动态）
  routes: constantRoutes
}

const mutations = {
  setToken(state, token) {
    state.token = token
    // 每次修改变量的值，得重新缓存一下
    setToken(token)
  },
  // 准备一个removeToken的mutation，用来移除token，后面会进行调用
  removeToken(state) {
    state.token = null
    removeToken()
  },
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  },
  // mutaition不能相互调用
  setRoutes(state, filterRoutes) {
    // filterRoutes  过滤之后的用户能访问的动态路由数组
    state.routes = [...constantRoutes, ...filterRoutes]
  }
}

const actions = {
  async login(context, data) {
    // console.log(data)
    // 1. 利用用户名密码调登录接口获取token
    const res = await login(data)
    // 2. 存token
    context.commit('setToken', res)
  },
  async getUserInfo(context) {
    // console.log('调获取用户信息的接口存vuex')
    // 1. 调获取用户信息的接口拿到用户信息
    const res = await getUserInfo()
    // 2. 把用户信息存到vuex中方便所有组件使用
    // console.log(res)
    context.commit('setUserInfo', res)
    // 3. 返回调接口得到的用户信息
    return res
  },
  // action的第二个场景：调用多个mutaion也可以封装action
  logout(context) {
    context.commit('removeToken') // 移除token
    context.commit('setUserInfo', {}) // 移除用户信息
    // 重置路由  （在退出登录，得时候重置路由）
    resetRouter()
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
